import React, { useEffect, useState } from 'react';
import Draggabilly from 'draggabilly';
import Tips from './Tips';

import { useSelector } from 'react-redux';
import { RootState } from '@/store';
import { useTranslation } from 'react-i18next';

interface SyncScreenContentProps {
	width?: string;
	height?: string;
	onClose?: () => void;
	onScale?: () => void;
	headerVisiable: boolean;
}
const SyncScreenContent = (props: SyncScreenContentProps) => {
	const { t } = useTranslation();
	const { width, height, onClose, onScale, headerVisiable } = props;
	const { screenSync } = useSelector((state: RootState) => state);
	useEffect(() => {
		new Draggabilly('#widget-sync-screen-container', {
			handle: '.sync-screen-tips',
			containment: '.widget-agent-session-box'
		});
	}, []);

	useEffect(() => {
		console.log(screenSync);
	}, [screenSync]);

	return (
		<div className="widget-sync-screen-container" style={{ width, height }} id="widget-sync-screen-container">
			{headerVisiable ? <Tips text={t('screen-sync') as string} onClose={onClose} onScale={onScale}></Tips> : undefined}
			{/* <Footer></Footer> */}
		</div>
	);
};

export default SyncScreenContent;
